<template>
    <div>
        <el-form ref="storageModelConfForm" label-position="left" label-width="130px" >
            <el-form-item label="描述" :rules="[{ required: true, message: '描述不能为空'}]">
                <el-input v-model="storageModel.desc" style="width:500px;"></el-input>
            </el-form-item>
            <el-form-item label="表前缀">
                <el-input v-model="storageModel.table_name_prefix" style="width:500px;"></el-input>
            </el-form-item>
            <el-form-item label="分表周期">
                <el-select v-model="storageModel.table_create_rand" placeholder="请选择" style="width:120px">
                    <el-option label="不分表" value="N" key="N"></el-option>
                    <el-option label="天" value="D" key="D"></el-option>
                    <el-option label="年" value="Y" key="Y"></el-option>
                    <el-option label="月" value="M" key="M"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模型详情">
                <label style="color:#F07F1F">字段列表({{sequelizeDetailsList.length}})： </label>
                <el-button type="primary" icon="el-icon-plus" @click="addField" size="mini">新增字段</el-button>
                <el-table :data="sequelizeDetailsList" style="width: 60%" max-height="480" border fit highlight-current-row>
                    <el-table-column label="#" type="index" width="50px;"></el-table-column>
                    <el-table-column label="字段名称">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.fieldName" size="mini"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="字段类型" width="130px;" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.type" placeholder="请选择" size="mini">
                                <el-option label="int" value="int" key="int"></el-option>
                                <el-option label="string" value="string" key="string"></el-option>
                                <el-option label="text" value="text" key="text"></el-option>
                                <el-option label="date" value="date" key="date"></el-option>
                                <el-option label="float" value="float" key="float"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="长度" width="150px;" align="center">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.len" :min="0" size="mini"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否主键" width="100px;" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.primaryKey" :active-value = "true" :inactive-value = "false" size="mini"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否唯一" width="100px;" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.unique" :active-value = "true" :inactive-value = "false" size="mini"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80px;" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" @click="removeField(scope.$index)" size="mini"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :disabled="submitLoading" :loading="submitLoading" @click="submitForm">保存</el-button>
                <!--<el-button>取消</el-button>-->
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { getStorageModelById, saveStorageModel } from '../../api/crawl.js';
import lodash from 'lodash';
export default {
    data(){
        return {
            storageModelConfForm : {
            },
            submitLoading : false,
            storageModel : {
                model_id : 0,
                desc : '',
                table_name_prefix : '',
                table_create_rand : 'D',
                sequelize_details : '',
            },
            sequelizeDetailsList : [], //storageModel.sequelize_details 对应的数组
        }
    },
    components: {
    },
    created(){
        const model_id = this.$route.params.model_id;
        if(Number(model_id)){
            this.storageModel.model_id = model_id;
            this.initStorageModelById();
        }else{
            this.storageModel.model_id = 0;
        }
    },
    watch: {
    },
    methods: {
        initStorageModelById(){
            getStorageModelById(this.storageModel.model_id).then(data=>{
                console.log('getStorageModelById------------',data);
                this.storageModel = data.rows[0];
                try{
                    let sequelizeDetailsObj = JSON.parse(this.storageModel.sequelize_details);
                    for(let fieldName in sequelizeDetailsObj){
                        let field = sequelizeDetailsObj[fieldName];
                        field.fieldName = fieldName;
                        this.sequelizeDetailsList.push(field);
                    }
                }catch(e){
                    console.error(e);
                }
            })
        },
        //新增字段
        addField(){
            this.sequelizeDetailsList.push({
                fieldName : '',
                type : 'string',
                len : 1000,
                primaryKey: false,
                unique : false
            });
        },
        //删除字段
        removeField(index){
            this.$confirm('确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.sequelizeDetailsList.splice(index, 1)
            }).catch((e) => {
                console.error(e);
            });
        },
        async submitForm(){
            try{
                //处理模型详情数据
                let sequelizeDetailsObj = {};
                for(let i = 0; i < this.sequelizeDetailsList.length; i++){
                    let item = this.sequelizeDetailsList[i];
                    let obj = {
                        type : item.type,
                        len : item.len
                    };
                    if(Number(item.len)){
                        obj.len = item.len;
                    }
                    if(item.primaryKey){
                        obj.primaryKey = item.primaryKey;
                    }
                    if(item.unique){
                        obj.unique = item.unique;
                    }
                    if(sequelizeDetailsObj[item.fieldName]){
                        this.$message({
                            message: '有重复的字段名，请检查！',
                            type: 'danger'
                        });
                        return;
                    }
                    sequelizeDetailsObj[item.fieldName] = obj;
                }
                this.storageModel.sequelize_details = JSON.stringify(sequelizeDetailsObj);
                //保存数据
                const postData = Object.assign({}, this.storageModel);
                this.submitLoading = true;
                const res = await saveStorageModel(postData);
                this.submitLoading = false;
                console.log('saveStorageModel------',res)
                if(res){
                    if (res.model_id) {
                        this.$alert('新增成功！', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$router.push('/storageModelList');
                            }
                        });
                    }else if (res === 1) {
                        this.$alert('修改成功！', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$router.push('/storageModelList');
                            }
                        });
                    }
                }else{
                    this.$message({
                        message: '保存失败！',
                        type: 'danger'
                    });
                }
            }catch(e){
                console.error(e);
            }
        }
    }
};
</script>